<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>json渲染表格</title>
     <style>
      table,th,td{
        border:1px solid lightblue;
   }
      table{
         width: 100%;
         border-collapse:collapse;
   }
    th,td{
        height: 30px;
    }
     tbody tr:hover{
        background-color:yellow!important;
    }
    tbody tr:nth-child(2n+1){
        background-color:#ccc;
    }
    </style>
</head>
<body>
 <table id ="myTable">
       <thead>
         <tr>
             <th>用户名</th>
             <th>姓名</th>
             <th>年龄</th>
             <th>性别</th>
             <th>手机号</th>
             <th>操作</th>
         </tr>
       </thead>
       <tbody>
              <tr>
              <td>1</td>
              <td>2</td>
              <td>3</td>
              <td>4</td>
              <td>5</td>
              <td>6</td>
            </tr>
       </tbody>
     </table>
    <script>
       var jsonObj={
               "success":true,
               "errorCode":0,
               "data":{
                   "total":100,
                   "list":[
                            {"id":1,"username":"A001","name":"张三","age":20,"gender":"男","moblie":"13912345678"},
                            {"id":2,"username":"B002","name":"李四","age":40,"gender":"男","moblie":"13912345678"},
                            {"id":3,"username":"C003","name":"小乔","age":21,"gender":"女","moblie":"13912785678"},
                            {"id":4,"username":"D004","name":"关羽","age":80,"gender":"男","moblie":"13752345678"},
                            {"id":5,"username":"E005","name":"刘备","age":60,"gender":"男","moblie":"13812345678"},
                            {"id":6,"username":"F006","name":"甄姬","age":30,"gender":"女","moblie":"13612345678"},
                            {"id":7,"username":"G007","name":"虞姬","age":15,"gender":"女","moblie":"13512345678"},
                            {"id":8,"username":"H008","name":"达摩","age":35,"gender":"男","moblie":"13426345678"},
                            {"id":9,"username":"I009","name":"赵云","age":40,"gender":"男","moblie":"13916665678"},
                            {"id":0,"username":"J000","name":"大乔","age":28,"gender":"女","moblie":"13232345678"},
                   ]

               }
       }
       var render = function(response){
                var table = document.querySelector('table');
                var trStr = '';
                var trArr=[];
                var i ;
                var data = response.data;//(拿到函数response中的data)
                var list = data.list;//(//拿到data下的list)
                var total =data.total;//(拿到data下的total)
                var len = list.length;
                var name;
                var index;
                for(var i =0;i<len;i++){ 
                    trArr.push(
                         '<tr>',
                              '<td>',list[i].username,'</td>',
                              '<td>',list[i].name,'</td>',
                              '<td>',list[i].age,'</td>',
                              '<td>',list[i].gender,'</td>',
                              '<td>',list[i].moblie,'</td>',
                              '<td>','<button class="del-Btn">删除</button>',
                              '<button class="abc-Btn">修改</button>',
                              '<button>查看</button>',
                              '</td>',
                             
                        '</tr>'
                        );
                } 
               
                table.getElementsByTagName('tbody')[0].innerHTML = trArr.join('');
              }; 
              var myTable = document.getElementById('myTable');
              myTable.onclick = function(e){
                var a = e.target.parentNode.parentNode.children[1].innerHTML;
                if(e.target.className=='del-Btn'){
                   alert('是否删除'+a)
                }
              
           }
              render(jsonObj);
    </script>
</body>
</html>